import React, {Component} from 'react';
import {Form, Button, Input} from 'antd';
import PropTypes from 'prop-types';

import css from './CommentForm.less';
const {TextArea} = Input;
const FormItem = Form.Item;

class CommentForm extends Component {
  static propTypes = {
    user: PropTypes.string,
    obSubmit: PropTypes.func
  }
  static defaultProps = {
    user: ''
  }
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    let user = this.props.user
    this.props.form.setFieldsValue({
      user: user
    });
    this.textarea.focus();
  }
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (this.props.onSubmit) {
          this.props.onSubmit({
            ...values,
            time: new Date().getTime()
          });
          this.props.form.setFieldsValue({
            content: ''
          });
        }
      }
    })
  }
  render() {
    const layout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18}
      }
    }
    const {getFieldDecorator} = this.props.form;
    return (
      <div className={css['comment-form-wrapper']} >
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <FormItem label="用户名" {...layout} key="user">
            {getFieldDecorator('user', {
              rules: [{required: true, message: '请输入用户名!'}],
            })(
                <Input placeholder="用户名" />
            )}
          </FormItem>
          <FormItem label="评论" {...layout} key="content">
            {getFieldDecorator('content', {
              rules: [{required: true, message: '请输入内容!'}]
            })(
                <TextArea rows={4} placeholder="评论" ref={(textarea) => this.textarea = textarea }></TextArea>
            )}
          </FormItem>
          <FormItem style={{textAlign: 'right'}}>
            <Button type="primary" htmlType="submit">发布</Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}
export default Form.create()(CommentForm)